<extend name="en_us:Public:base" />
<block name="title">
    <title>QRInn - Operational report</title>
</block>
<block name="extendHead">
    <link rel="stylesheet" type="text/css" href="/Public/dist/Home/common_control.css?rev=64d1945d31e576a17fc394f2ae2f098d">
    <link rel="stylesheet" type="text/css" href="/Public/dist/Home/ReportPage/common.css?rev=93c8af7edfcfa9b852672c525380fc4d">
    <link rel="stylesheet" type="text/css" media="all" href="__PUBLIC__/jslib/bootstrap-daterangepicker/daterangepicker.css" />
</block>
<block name="document">
    <div id="doc" class="container-above-md">
        <include file="en_us:Public:Include_control_navbar" navbar-menu-statistic="active" />
        <div id="doc-body" class="row">
            <include file="en_us:Public:Include_report_menu" doc-side-room="active" />
            <div id="doc-center">
                <include file="en_us:Public:Include_report_header" title="Operational report" />
                <div class="content-panel" id="statisticOverview">
                    <div class="content-panel-header">
                        <div class="content-panel-title">Operational overview</div>

                        <div class="btn-group pull-right" id="tabSwitchRoom" style="padding-top: 6px;">
                            <a class="btn btn-raised btn-primary" id="room-report">Common room</a>
                            <a class="btn btn-raised" id="hour-room-report">Hour room</a>
                            <a class="btn btn-raised" id="long-room-report">Long rental room</a>
                        </div>
                    </div>
                    <div class="content-panel-body content-panel-body-without-padding">
                        <div class="content-panel-help">According to check the amount of the order of the amount of statistics for you to analyze the operation of the inn。</div>
                        <include file="en_us:Public:Include_content_loading" loading-container-id="" loading-title="hidden" />
                        <div class="row text-sm border-box-horizontal-container">
                            <div class="col-xs-4 col-without-padding border-box-horizontal vertical-middle-block">
                                <div class="vertical-middle-block-cell">
                                    <div>Live:<span class="text-primary typo-display-1"><span data-tag="actualOccupancy">0</span></span>&nbsp;</div>
                                    <div class="detail-desc typo-text-black-light">Guests have not arrived at the shop&nbsp;<span data-tag="notCheckIn">0</span>&nbsp;,Not sold out&nbsp;<span data-tag="notSold">0</span>&nbsp;</div>
                                </div>
                            </div>
                            <div class="col-xs-4 col-without-padding border-box-horizontal vertical-middle-block">
                                <div class="vertical-middle-block-cell">
                                    <div><span class="text-primary typo-display-1"><span data-tag="occupancyRate">0</span></span>&nbsp;%</div>
                                    <div class="detail-desc typo-text-black-light">Occupancy rate</div>
                                </div>
                            </div>
                            <div class="col-xs-4 col-without-padding border-box-horizontal vertical-middle-block">
                                <div class="vertical-middle-block-cell">
                                    <div>{$hotelDefaultSymbol}<span class="text-accent typo-display-1"><span data-tag="price">0</span></span>
                                    </div>
                                    <div class="detail-desc typo-text-black-light">Average price</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="content-panel">
                    <div class="content-panel-header">
                        <div class="content-panel-title">Operational Trends</div>
                    </div>
                    <div class="content-panel-body content-panel-body-vertical-padding">
                        <include file="en_us:Public:Include_content_loading" loading-container-id="" loading-title="hidden" />
                        <div class="btn-group"  id="tabSwitchGroup">
                            <div class="btn-sm btn btn-raised btn-primary" data-value="income" data-units="Unit({$hotelDefaultSymbol})" data-suffix="{$hotelDefaultSymbol}">Income</div>
                            <div class="btn-sm btn btn-raised" data-value="actualOccupancy" data-units="Unit()" data-suffix="">Live</div>
                            <div class="btn-sm btn btn-raised" data-value="occupancyRate" data-units="百m比" data-suffix="%">Occupancy rate</div>
                            <div class="btn-sm btn btn-raised" data-value="price" data-units="Unit({$hotelDefaultSymbol})" data-suffix="{$hotelDefaultSymbol}">Average price</div>
                            <div class="btn-sm btn btn-raised" data-value="notSold" data-units="Unit()" data-suffix="">Not sold out</div>
                            <div class="btn-sm btn btn-raised" data-value="notCheckIn" data-units="Unit()" data-suffix="">Not admitted</div>
                        </div>
                        <div id="tabSwitchChart" class="full-width-chart-container"></div>
                    </div>
                </div>
                <div class="content-panel" id="roomInfoContaienr">
                    <div class="content-panel-header">
                        <div class="content-panel-title">Operational details</div>
                        <div class="content-panel-operation">
                            <a class="btn-link" id="export-room-data" data-href="/Home/Report/exportRoom?hotel={$currentHotel}&start={$startDate}&end={$endDate}">Export the table</a>
                        </div>
                    </div>
                    <div class="content-panel-body content-panel-body-vertical-padding">
                        <include file="en_us:Public:Include_content_loading" loading-container-id="" loading-title="hidden" />
                        <table class="table content-panel-table">
                            <thead>
                                <tr>
                                    <th>Room type</th>
                                    <th>Room number</th>
                                    <th>Income</th>
                                    <th>Live</th>
                                    <th>Occupancy rate</th>
                                    <th>Average price</th>
                                    <th>Not sold out</th>
                                    <th>Not admitted</th>
                                    <th>More</th>
                                    <th>Statistics</th>
                                </tr>
                            </thead>
                            <tbody id="roomInfoTbody">
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="content-panel" id="consumptionContaienr">
                    <div class="content-panel-header">
                        <div class="content-panel-title">Consumption details</div>
                        <!--<div class="content-panel-operation">
                            <a class="btn-link" id="export-consumption-data" data-href="/Home/Report/exportRoom?hotel={$currentHotel}&start={$startDate}&end={$endDate}">Export the table</a>
                        </div>-->
                    </div>
                    <div class="content-panel-body content-panel-body-vertical-padding">
                        <include file="en_us:Public:Include_content_loading" loading-container-id="" loading-title="hidden" />
                        <table class="table content-panel-table">
                            <thead>
                                <tr>
                                    <th>Guest name</th>
                                    <th>Room information</th>
                                    <th>Money</th>
                                    <th>Order</th>
                                    <th>More</th>
                                </tr>
                            </thead>
                            <tbody id="consumptionTbody">
                            </tbody>
                        </table>
                    </div>
                    <div class="content-panel-footer">
                        <div class="pull-right">
                            <ul class='pagination pagination-sm'></ul>
                        </div>
                        <div class="pull-right content-panel-pagination-info">
                                                    There are &nbsp;<span class="text-accent content-panel-pagination-count">0</span>&nbsp;Records
                        </div>
                    </div>
                </div>              
                
            </div>
            <!--end of doc-center-->
        </div>
        <!--end of doc body-->
    </div>
    <!--end of doc-->
    <script type="text/html" id="templateRoomTypeReportItem">
        <tr class="first-tr">
            <td class="roomType">
                <div data-tag="roomType"></div>
            </td>
            <td>
                <div data-tag="name"></div>
            </td>
            <td>
                <div data-tag="total"></div>
            </td>
            <td>
                <div data-tag="actualOccupancy"></div>
            </td>
            <td  data-tag="occupancyRate">
            </td>
            <td>
                <div data-tag="price"></div>
            </td>
            <td>
                <div data-tag="notSold"></div>
            </td>
            <td>
                <div data-tag="notCheckIn"></div>
            </td>
            <td>
                <div class="btn-link btn-sm roomReportDetailTrigger">Details</div>
                <div class="btn-link btn-sm exportRoomReportDetailTrigger">Export details</div>
            </td>
            <td class="roomTypeStatistic">Total Income:{$hotelDefaultSymbol}&nbsp;<span data-tag="roomTypeTotal"></span>,Occupancy rate:&nbsp;<span data-tag="roomTypeOccupancyRate"></span>&nbsp;%,Average price:{$hotelDefaultSymbol}&nbsp;<span data-tag="roomTypePrice"></span></td>
        </tr>
    </script>
    <script type="text/html" id="templateRoomReportItem">
        <tr class="first-tr">
            <td>
                <div data-tag="name"></div>
            </td>
            <td>
                <div data-tag="total"></div>
            </td>
            <td>
                <div data-tag="actualOccupancy"></div>
            </td>
            <td  data-tag="occupancyRate">
            </td>
            <td>
                <div data-tag="price"></div>
            </td>
            <td>
                <div data-tag="notSold"></div>
            </td>
            <td>
                <div data-tag="notCheckIn"></div>
            </td>
            <td>
                <div class="btn-link btn-sm roomReportDetailTrigger">Details</div>
                <div class="btn-link btn-sm exportRoomReportDetailTrigger">Export details</div>
            </td>
        </tr>
    </script>

    <script type="text/html" id="templateConsumptionTypeItem">
        <tr class="first-tr">
            <td>
                <div data-tag="name"></div>
            </td>
            <td>
                <div data-tag="info"></div>
            </td>
            <td>
                <div data-tag="price"></div>
            </td>
            <td>
                <div data-tag="order"></div>
            </td>
            <td>
                <div class="btn-link btn-sm consumptionDetailTrigger" data-toggle="modal" data-target="#detailModal" >Details</div>
                <div class="btn-link btn-sm consumptionDetailDel" data-toggle="modal" data-target="#deleteModal" >Delete</div>
            </td>
        </tr>
    </script> 
    
    <div class="modal fade" data-backdrop="static" id="deleteModal">
        <div class="modal-dialog modal-confirm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <div class="modal-title"> Delete record</div>
                </div>
                <div class="modal-body">Are you sure you want to delete the record?
                </div>
                <div class="modal-footer">
                    <div class="form-horizontal form-sm">
                        <div class="form-group">
                            <div class="col-xs-10 col-xs-offset-2">
                                <div class="help-block inline-help-block inline-help-block-right"></div>
                                <button type="button" class="btn-sm btn-primary btn-raised" id="submitDetailDelete">OK</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>    

    <!--Operation of list模态框-->
    <div class="modal fade" data-backdrop="static" id="detailModal">
        <div class="modal-dialog sm-width">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <div class="modal-title ">Project details</div>
                </div>
                <div class="modal-body modal-body-flow">    
                    <table class="table content-panel-table">
                        <thead>
                            <tr class="operator_th">
                                <th>Project name</th>
                                <th>Payment time</th>
                                <th>Money</th>
                                <th>Payment method</th>
                            </tr>
                        </thead>
                        <tbody id="detailListBody" class="hidden"></tbody>
                        <div id="no_detailListBody" class="hidden">没有More信息</div>
                    </table>
                </div>
                <div class="content-flow-footer"></div>
            </div>
        </div>
    </div>   

    <!--js要用到的模板-->
    <script type="text/html" id="templateDetailMessage">
        <tr>
            <td class="col-xs-3">
                <div class="info_name"></div>
            </td>
            <td class="col-xs-3">
                <div class="info_time"></div>
            </td>
            <td class="col-xs-3">
                <div class="info_price"></div>
            </td>
            <td class="col-xs-3">
                <div class="pay"></div>
            </td>
        </tr>
    </script>    
    

</block>
<block name="extendFootJs">
    <script type="text/javascript" src="/Public/dist/Home/common_control.js?rev=cb56664845b123cdc1b1e766ce01246a"></script>
    <script type="text/javascript" src="__PUBLIC__/jslib/moment.js/2.9.0/moment.min.js"></script>
    <script type="text/javascript" src="__PUBLIC__/jslib/bootstrap-daterangepicker/daterangepicker.js"></script>
    <script type="text/javascript" src="__PUBLIC__/jslib/highcharts/4.2.1/highcharts.js"></script>
    <script type="text/javascript" src="/Public/dist/Home/ReportPage/room.js?rev=76a8f0f2135ecf22272c79e056aeec9d"></script>
</block>
